<template>
  <div class="ssvip">
    <div class="addbtn">
      <el-button type="text" @click="addStudent()">添加</el-button>
      <el-button type="text" @click="handleDelete()">删除</el-button>
    </div>
    <!-- 学生信息 -->
    <el-table :data="resdata.slice((currentPage - 1)*pageSize,currentPage*pageSize)" max-height='450'
      style="width: 100%" @selection-change="handleSelectionChange">
      <!-- 全选 -->
      <el-table-column type="selection" width="55">
      </el-table-column>
      <!-- 数据 -->
      <el-table-column prop="id" label="ID" width="100" align='center'>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="120" align='center'>
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.name }}</p>
            <p>班级: {{ scope.row.phone }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="class" label="班级" width="120" align='center'>
      </el-table-column>
      <el-table-column prop="age" label="年龄" width="150" align='center'>
      </el-table-column>
      <el-table-column label="性别" width="150" align='center'>
        <template slot-scope="scope">
          <span v-if="scope.row.sex == '0'">女</span>
          <span v-else>男</span>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="联系方式" width="150" align='center'>
      </el-table-column>
      <el-table-column label="操作" align='center'>
        <template slot-scope="scope">
          <el-button size="mini" @click="updataIndex(scope.$index)">编辑</el-button>
          <el-button size="mini" type="danger" @click="delData(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40,50]" layout="total, sizes, prev, pager, next, jumper" :total="resdata.length">
      </el-pagination>
    </div>
    <!-- 学生信息编辑弹出框 -->
    <el-dialog title="请添加信息" :visible.sync="centerDialogVisible" width="35%" center>
      <el-form ref="form" v-model="upform" label-width="80px" class="faculty">
        <el-form-item label="ID">
          <el-input v-model="upform.number"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="upform.name"></el-input>
        </el-form-item>
        <el-form-item label="班级">
          <el-select v-model="upform.class" placeholder="请选择班级" class='wid'>
            <el-option label="班级1" value="1"></el-option>
            <el-option label="班级2" value="2"></el-option>
            <el-option label="班级3" value="3"></el-option>
            <el-option label="班级4" value="4"></el-option>
            <el-option label="班级5" value="5"></el-option>
            <el-option label="班级6" value="6"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="upform.age"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="resource">
          <el-radio-group class="radio-group" v-model='upform.sex'>
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="upform.phone"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updata()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 学生添加弹出框 -->
    <el-dialog title="请添加信息" :visible.sync="centerDialogVisible2" width="35%" center>
      <el-form ref="form" :model="form" label-width="80px" class="faculty">
        <el-form-item label="ID">
          <el-input v-model="form.id"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="班级">
          <el-select v-model="form.class" placeholder="请选择班级" class='wid'>
            <el-option label="班级1" value="1"></el-option>
            <el-option label="班级2" value="2"></el-option>
            <el-option label="班级3" value="3"></el-option>
            <el-option label="班级4" value="4"></el-option>
            <el-option label="班级5" value="5"></el-option>
            <el-option label="班级6" value="6"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="form.age"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="resource">
          <el-radio-group class="radio-group" v-model='form.sex'>
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="PushStudentData()">确 定</el-button>
      </span>
    </el-dialog>
    <el-button @click="Delstudents()">11111</el-button>
  </div>
</template>

<script>
  // import StudentTC from "./students/StudentTC";
  export default {
    data() {
      return {
        arr:[],
        //多选
        checkedCities: "",
        //多选索引
        checkIndex: [],
        //学生信息数据
        resdata: [],
        //学生信息编辑弹出框数据
        form: {
          age: "",
          class: "",
          discipline: "",
          name: "",
          id: "",
          phone: "",
          sex: "",
          state: ""
        },
        upform: {
          age: "",
          class: "",
          discipline: "",
          name: "",
          id: '',
          phone: "",
          sex: '',
          state: "1"
        },
        //索引
        Index: '',
        //编辑学生信息判断
        centerDialogVisible: false,
        //学生添加判断
        centerDialogVisible2: false,
        //头像路径
        url: '../../static/kkdetou.jpg',
        // 分页的参数
        total: this.total,
        currentPage: 1, //当前页数
        pageSize: 10 // 每页显示条数
      }
    },
    methods: {
      //分页方法
      handleSizeChange(val) {
        this.pageSize = val
        this.currentPage = 1
        // console.log(`每页 ${val} 条`)
      },
      handleCurrentChange(val) {
        this.currentPage = val
        console.log(`当前页: ${val}`);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      addStudent() {
        //点击弹出添加数据
        this.centerDialogVisible2 = true;
        this.form.id = this.resdata.length + 1;
      },
      //添加学生
      PushStudentData() {
        this.centerDialogVisible2 = false;
        this.mysqlser.post('/addstudents', {
          name: this.form.name,
          id: this.form.id,
          age: this.form.age,
          sex: this.form.sex,
          class: this.form.class,
          phone: this.form.phone,

        });
        this.form = {
          age: "",
          class: "",
          discipline: "",
          name: "",
          id: '',
          phone: "",
          sex: "",
          state: ""
        }
      },
      updataIndex(index) {
        //点击编辑弹出弹窗并获取index
        this.Index = ((this.currentPage - 1) * this.pageSize) + index;
        this.centerDialogVisible = true;
        // console.log(this.Index);
      },
      updata() {
        //点击确定修改
        this.resdata[this.Index] = this.upform;
        this.centerDialogVisible = false;
        this.upform = {
          age: "",
          class: "",
          discipline: "",
          name: "",
          number: '',
          phone: "",
          sex: '',
          state: ""
        }
      },
      delData(index) {
        //删除学生信息
        var delindex = ((this.currentPage - 1) * this.pageSize) + index;
        // console.log(delindex);
        this.resdata.splice(delindex, 1);
      },
      //批量删除
      handleSelectionChange(data) {
        this.selectedData = data;
      },
      handleDelete() {
        var that = this;
        var val = this.selectedData;
        if (val) {
          val.forEach(function(item, index) {

            that.resdata.forEach(function(itemI, indexI) {
              if (item === itemI) {
                // that.resdata.splice(indexI, 1);
                that.checkIndex += itemI.id;
                that.arr = that.checkIndex.split('')
              }
            });
          });
          this.deleteUpdate()
        }
        // this.$refs.multipleTable.clearSelection();
      },
      deleteUpdate() {
        this.mysqlser.get(`/delmorestudents?id=${this.arr}`).then(res => {
          console.log(res);
        });
      }
    },
    mounted() {
      getStudent: {
        var _this = this;
        this.mysqlser.get('/allstudents').then((res) => {
          this.resdata = [...res.data]
          // console.log(this.resdata);
        })
      };
    }
  }
</script>

<style scoped="scoped">
  .el-table {
    text-align: center;
  }

  .ssvip {
    position: relative;
  }

  .addbtn {
    position: absolute;
    top: 3px;
    right: 0px;
    z-index: 100;
  }

  .box {
    width: 520px;
    overflow: hidden;
  }

  .faculty {
    float: left;
  }

  .wid {
    width: 300px;
  }

  .radio-group {
    float: left;
    margin-top: 13px;
  }

  .title {
    font-weight: 600;
  }

  .dis {
    letter-spacing: 3px;
  }

  .btnsize {
    width: 200px;
  }

  .block {
    margin-top: 15px;
  }
</style>
